<template>
  <div class="form-card">
    <div class="form-title">
      <i class="fas fa-check-circle form-icon"></i>
      <h2>确认预约信息</h2>
    </div>

    <div class="success-message">
      <p>请确认以下信息准确无误，提交后将无法修改</p>
    </div>

    <div class="summary-card">
      <h3>预约信息摘要</h3>

      <div class="summary-item">
        <div class="summary-label">
          <i class="fas fa-signature"></i>
          姓名：
        </div>
        <div class="summary-value">{{ formData.name }}</div>
      </div>

      <div class="summary-item">
        <div class="summary-label">
          <i class="fas fa-id-card"></i>
          身份证号：
        </div>
        <div class="summary-value">{{ formData.idCard }}</div>
      </div>

      <div class="summary-item">
        <div class="summary-label">
          <i class="fas fa-mobile-alt"></i>
          手机号码：
        </div>
        <div class="summary-value">{{ formData.phone }}</div>
      </div>

      <div class="summary-item">
        <div class="summary-label">
          <i class="fas fa-stethoscope"></i>
          就诊科室：
        </div>
        <div class="summary-value">{{ selectedPrimaryDepartment.name }} > {{ selectedSecondaryDepartment.name }}</div>
      </div>

      <div class="summary-item">
        <div class="summary-label">
          <i class="fas fa-user-md"></i>
          就诊医生：
        </div>
        <div class="summary-value">{{ selectedDoctor.name }}（{{ selectedDoctor.title }}）</div>
      </div>

      <div class="summary-item">
        <div class="summary-label">
          <i class="fas fa-calendar-alt"></i>
          预约日期：
        </div>
        <div class="summary-value">{{ formatDate(formData.appointmentDate) }}</div>
      </div>

      <div class="summary-item">
        <div class="summary-label">
          <i class="fas fa-clock"></i>
          预约时段：
        </div>
        <div class="summary-value">{{ formData.appointmentPeriod === 'morning' ? '上午（08:00-12:00）' : '下午（14:00-18:00）' }}</div>
      </div>

      <div class="summary-item">
        <div class="summary-label">
          <i class="fas fa-clipboard-check"></i>
          健康问卷：
        </div>
        <div class="summary-value">
          {{ questionnaireStatus }}
        </div>
      </div>
    </div>

    <div class="form-buttons">
      <button type="button" class="btn btn-secondary" @click="goToPreviousStep">
        <i class="fas fa-arrow-left"></i>
        上一步
      </button>
      <button type="button" class="btn btn-primary" @click="submitAppointment">
        <i class="fas fa-paper-plane"></i>
        提交预约
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  },
  primaryDepartments: {
    type: Array,
    required: true
  },
  secondaryDepartments: {
    type: Array,
    required: true
  },
  doctors: {
    type: Array,
    required: true
  },
  questionnaireStatus: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['previous', 'submit'])

const formData = props.modelValue

const selectedPrimaryDepartment = computed(() => {
  return props.primaryDepartments.find(d => d.id === props.modelValue.primaryDepartmentId) || {}
})

const selectedSecondaryDepartment = computed(() => {
  return props.secondaryDepartments.find(d => d.id === props.modelValue.secondaryDepartmentId) || {}
})

const selectedDoctor = computed(() => {
  return props.doctors.find(d => d.id === props.modelValue.doctorId) || {}
})

const goToPreviousStep = () => {
  emit('previous')
}

const submitAppointment = () => {
  emit('submit')
}

// 日期格式化
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return isNaN(date.getTime()) ? '' : `${date.getFullYear()}年${(date.getMonth() + 1)}月${date.getDate()}日`;
}
</script>

<style scoped>
.form-card {
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
}

.form-title {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 20px;
}

.form-icon {
  font-size: 32px;
  color: #3498db;
  margin-right: 15px;
}

.form-title h2 {
  font-size: 28px;
  font-weight: 700;
  color: #2980b9;
  margin: 0;
}

.success-message {
  display: flex;
  align-items: center;
  background-color: rgba(46, 204, 113, 0.1);
  border: 2px solid #2ecc71;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  width: 100%;
}

.success-message p {
  font-size: 20px;
  font-weight: 600;
  color: #27ae60;
  margin: 0;
}

.summary-card {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 25px;
  margin-top: 20px;
}

.summary-card h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: #2980b9;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px;
}

.summary-item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.summary-label {
  display: flex;
  align-items: center;
  font-weight: 600;
  min-width: 180px;
  font-size: 18px;
  color: #555;
}

.summary-label i {
  margin-right: 10px;
  color: #3498db;
  width: 20px;
  text-align: center;
}

.summary-value {
  font-size: 18px;
  color: #333;
}

.form-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  font-size: 20px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 160px;
}

.btn i {
  margin: 0 8px;
}

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-primary:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-secondary {
  background-color: #e0e0e0;
  color: #555;
}

.btn-secondary:hover {
  background-color: #d0d0d0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-card {
    padding: 20px;
  }

  .form-title h2 {
    font-size: 24px;
  }

  .form-icon {
    font-size: 28px;
  }

  .success-message {
    width: 100%;
    height: auto;
    flex-direction: column;
    text-align: center;
  }

  .summary-label, .summary-value {
    font-size: 16px;
  }

  .btn {
    padding: 14px 20px;
    font-size: 18px;
    min-width: 120px;
  }

  .form-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .form-buttons .btn {
    width: 100%;
  }
}
</style>